<template>
  <div>
    <HeadNav page-name="充值" :showNav="true" />
    <div class="top_up" :class="{ 'top_up_ios': isIOS }">
      <div class="top_up_num">
        <div class="money">充值金额</div>
        <div class="money_input">
          <span>¥</span>
          <input class="input_num" placeholder-style="color: #dcdee0;" type="number" placeholder="请输入金额">
        </div>
        <div class="poundage">需要支付1%手续费</div>
      </div>
      <div class="top_up_text">
        充值
      </div>
    </div>
  </div>
</template>
<script>
import HeadNav from "@/components/headNav/index.vue";
export default {
  name: 'topUp',
  components: {HeadNav},
  data () {
    return {
      isIOS: uni.getSystemInfoSync().system.indexOf("Android") !== 0,
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.top_up {
  height: calc(100vh - 68px);
  background: #f2f3f5;
  &.top_up_ios {
    height: calc(100vh - 84px);
  }
}
.top_up_num {
  background-color: #fff;
  padding-top: 32rpx;
  .money {
    padding-left: 32rpx;
    font-size: 28rpx;
    color: #323233;
  }
  .money_input {
    padding-left: 32rpx;
    margin: 32rpx 0;
    display: flex;
    color: #323233;
    font-size: 64rpx;
    .input_num {
      height: 90rpx;
      margin-left: 32rpx;
      color: #e44435;
    }
  }
  .poundage {
    padding: 24rpx 0 24rpx 32rpx;
    border-top: 2px solid #f2f3f5;
  }
}

.top_up_text {
  height: 88rpx;
  font-size: 32rpx;
  background: #e44435;
  border-radius: 44rpx;
  margin: 48rpx 32rpx 0;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
